<template>
	<view class="container">
		<view class="post-comment">
			<view class="goods">
				<view class="img">
					<image :src="orderGoods.picUrl"></image>
				</view>
				<view class="info">
					<view class="info-title">{{ orderGoods.goodsName }}</view>
					<view class="info-content">规格：{{ orderGoods.specifications.toString() }}</view>
					<view class="info-counter">x {{ orderGoods.number }}</view>
				</view>
			</view>
			<view class="rater">
				<text class="rater-title">评分</text>
				<block v-for="(item, index) in stars" :key="index">
					<image src="/static/static/images/icon_collect_checked.png" @tap="selectRater" :data-star="item" v-if="item < star"></image>
					<image src="/static/static/images/icon_collect.png" @tap="selectRater" :data-star="item" v-else></image>
				</block>
				<text class="rater-desc">{{starText}}</text>
			</view>
			<view class="input-box">
				<textarea class="content" focus="true" @input="bindInputValue" maxlength="140" placeholder="留言经过筛选后，对所有人可见"></textarea>
				<text class="count">{{140 - content.length}}</text>
			</view>

			<!-- <view class="weui-uploader">
      <view class="weui-uploader__hd">
        <view class="weui-uploader__title">图片上传</view>
        <view class="weui-uploader__info">{{picUrls.length}}/{{files.length}}</view>
      </view>
      <view class="weui-uploader__bd">
        <view class="weui-uploader__files" id="uploaderFiles">
          <block v-for="(item, index) in files" :key="index">
            <view class="weui-uploader__file" @tap="previewImage" :id="item">
              <image class="weui-uploader__img" :src="item" mode="aspectFill"></image>
            </view>
            <view class="weui-uploader__file weui-uploader__file_status" bindtap="previewImage" id="{{item}}">
              <image class="weui-uploader__img" src="{{item}}" mode="aspectFill" />
              <view class="weui-uploader__file-content">50%</view>
            </view>
          </block>
          <view class="weui-uploader__input-box">
            <view class="weui-uploader__input" @tap="chooseImage"></view>
          </view>
        </view>
      </view>
    </view> -->
		</view>

		<view class="address-action">
			<button class="btn_orange_border" @tap="onClose">取消</button>
			<button class="btn_orange" @tap="onPost">发表</button>
		</view>
	</view>
</template>

<script>
// 上传组件 基于https://github.com/Tencent/weui-wxss/tree/master/src/example/uploader
let app = getApp();
let util = require("../../utils/util.js");
let api = require("../../config/api.js");

export default {
	data()
	{
		return {
			orderId: 0,
			type: 0,
			valueId: 0,
			orderGoods: {},
			content: '',
			stars: [ 0, 1, 2, 3, 4 ],
			star: 5,
			starText: '十分满意',
			hasPicture: false,
			picUrls: [],
			files: []
		};
	},

	components: {},
	props: {},
	onLoad: function (options)
	{
		let that = this;
		that.setData({
			orderId: options.orderId,
			type: options.type,
			valueId: options.valueId
		});
		this.getOrderGoods();
	},
	onReady: function () { },
	onShow: function ()
	{// 页面显示
	},
	onHide: function ()
	{// 页面隐藏
	},
	onUnload: function ()
	{// 页面关闭
	},
	methods: {
		chooseImage: function (e)
		{
			if (this.files.length >= 5)
			{
				util.showErrorToast('只能上传五张图片');
				return false;
			}

			let that = this;
			uni.chooseImage({
				count: 1,
				sizeType: [ 'original', 'compressed' ],
				sourceType: [ 'album', 'camera' ],
				success: function (res)
				{
					that.setData({
						files: that.files.concat(res.tempFilePaths)
					});
					that.upload(res);
				}
			});
		},
		upload: function (res)
		{
			let that = this;
			const uploadTask = uni.uploadFile({
				url: api.StorageUpload,
				filePath: res.tempFilePaths[ 0 ],
				name: 'file',
				success: function (res)
				{
					var _res = JSON.parse(res.data);

					if (_res.errno === 0)
					{
						var url = _res.data.url;
						that.picUrls.push(url);
						that.setData({
							hasPicture: true,
							picUrls: that.picUrls
						});
					}
				},
				fail: function (e)
				{
					uni.showModal({
						title: '错误',
						content: '上传失败',
						showCancel: false
					});
				}
			});
			uploadTask.onProgressUpdate(res =>
			{
				console.log('上传进度', res.progress);
				console.log('已经上传的数据长度', res.totalBytesSent);
				console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend);
			});
		},
		previewImage: function (e)
		{
			uni.previewImage({
				current: e.currentTarget.id,
				// 当前显示图片的http链接
				urls: this.files // 需要预览的图片http链接列表

			});
		},
		selectRater: function (e)
		{
			let star = e.currentTarget.dataset.star + 1;
			let starText;

			if (star == 1)
			{
				starText = '很差';
			} else if (star == 2)
			{
				starText = '不太满意';
			} else if (star == 3)
			{
				starText = '满意';
			} else if (star == 4)
			{
				starText = '比较满意';
			} else
			{
				starText = '十分满意';
			}

			this.setData({
				star: star,
				starText: starText
			});
		},
		getOrderGoods: function ()
		{
			let that = this;
			util.request(api.OrderGoods, {
				orderId: that.orderId,
				goodsId: that.valueId
			}).then(function (res)
			{
				if (res.errno === 0)
				{
					that.setData({
						orderGoods: res.data
					});
				}
			});
		},
		onClose: function ()
		{
			uni.navigateBack();
		},
		onPost: function ()
		{
			let that = this;

			if (!this.content)
			{
				util.showErrorToast('请填写评论');
				return false;
			}

			util.request(api.OrderComment, {
				orderGoodsId: that.orderGoods.id,
				content: that.content,
				star: that.star,
				hasPicture: that.hasPicture,
				picUrls: that.picUrls
			}, 'POST').then(function (res)
			{
				if (res.errno === 0)
				{
					uni.showToast({
						title: '评论成功',
						complete: function ()
						{
							/* uni.navigateTo({
								url: '/pages/ucenter/index/index'
							}); */

							uni.navigateBack({
								delta: 1
							});
						}
					});
				}
			});
		},

		bindInputValue(event)
		{
			let value = event.detail.value; //判断是否超过140个字符

			if (value && value.length > 140)
			{
				return false;
			}

			this.setData({
				content: event.detail.value
			});
		}

	}
};
</script>
<style>
page,
.container {
	height: 100%;
	background: #f4f4f4;
}

.post-comment {
	background-color: #fff;
	margin: 30rpx;
	padding: 30rpx;
	border-radius: 8rpx;
	overflow: hidden;
	box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
}

.post-comment .goods {
	display: flex;
	align-items: center;
}

.post-comment .goods .img {
	height: 140rpx;
	width: 140rpx;
	background: #f4f4f4;
	border-radius: 6rpx;
}

.post-comment .goods .img image {
	height: 140rpx;
	width: 140rpx;
}

.post-comment .goods .name {
	display: block;
	line-height: 44rpx;
	color: #333;
	font-size: 30rpx;

	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.post-comment .goods .number {
	display: block;
	height: 37rpx;
	line-height: 37rpx;
	color: #666;
	font-size: 25rpx;
}

.post-comment .goods .status {
	width: 105rpx;
	color: #b4282d;
	font-size: 25rpx;
}

.post-comment .rater {
	display: flex;
	flex-direction: row;
	height: 55rpx;
}

.post-comment .rater .rater-title {
	font-size: 29rpx;
	padding-right: 10rpx;
}

.post-comment .rater image {
	padding-left: 5rpx;
	height: 50rpx;
	width: 50rpx;
}

.post-comment .rater .rater-desc {
	font-size: 29rpx;
	padding-left: 10rpx;
}

.post-comment .input-box {
	height: 337.5rpx;
	width: 690rpx;
	position: relative;
	background: #fff;
}

.post-comment .input-box .content {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	background: #fff;
	font-size: 29rpx;
	border: 5px solid #f4f4f4;
	height: 300rpx;
	width: 650rpx;
	padding: 20rpx;
}

.post-comment .input-box .count {
	position: absolute;
	bottom: 20rpx;
	right: 20rpx;
	display: block;
	height: 30rpx;
	width: 50rpx;
	font-size: 29rpx;
	color: #999;
}

.post-comment .btns {
	height: 108rpx;
}

.post-comment .close {
	float: left;
	height: 108rpx;
	line-height: 108rpx;
	text-align: left;
	color: #666;
	padding: 0 30rpx;
}

.post-comment .post {
	float: right;
	height: 108rpx;
	line-height: 108rpx;
	text-align: right;
	padding: 0 30rpx;
}

.weui-uploader {
	margin-top: 50rpx;
}

.weui-uploader__hd {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	padding-bottom: 10px;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
}

.weui-uploader__title {
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	flex: 1;
}

.weui-uploader__info {
	color: #b2b2b2;
}

.weui-uploader__bd {
	margin-bottom: -4px;
	margin-right: -9px;
	overflow: hidden;
}

.weui-uploader__file {
	float: left;
	margin-right: 9px;
	margin-bottom: 9px;
}

.weui-uploader__img {
	display: block;
	width: 79px;
	height: 79px;
}

.weui-uploader__file_status {
	position: relative;
}

.weui-uploader__file_status:before {
	content: ' ';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.5);
}

.weui-uploader__file-content {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	color: #fff;
}

.weui-uploader__input-box {
	float: left;
	position: relative;
	margin-right: 9px;
	margin-bottom: 9px;
	width: 77px;
	height: 77px;
	border: 1px solid #d9d9d9;
}

.weui-uploader__input-box:after,
.weui-uploader__input-box:before {
	content: ' ';
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	background-color: #d9d9d9;
}

.weui-uploader__input-box:before {
	width: 2px;
	height: 39.5px;
}

.weui-uploader__input-box:after {
	width: 39.5px;
	height: 2px;
}

.weui-uploader__input-box:active {
	border-color: #999;
}

.weui-uploader__input-box:active:after,
.weui-uploader__input-box:active:before {
	background-color: #999;
}

.weui-uploader__input {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
}

.info {
	flex: 1;
	min-height: 140rpx;
	margin-left: 30rpx;
	position: relative;
}

.info-title {
	color: #212223;
	font-size: 28rpx;

	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin-bottom: 10rpx;
	margin-right: 80rpx;
}

.info-content {
	color: #898b8d;
	display: flex;
	justify-content: space-between;
	margin-bottom: 15rpx;
}

.info-content text {
	color: #898b8d;
	font-size: 28rpx;
}

.info-price {
	color: #898b8d;
	font-size: 28rpx;
	transform: translateX(-5rpx);
}

.info-counter {
}

.post-comment .rater {
	margin-top: 30rpx;
	margin-bottom: 30rpx;
	align-items: center;
}

.post-comment .rater uni-image {
	margin: 0 5rpx;
}

.post-comment .input-box .content {
	border: none;
	background-color: #f4f4f4;
	width: 590rpx;
}

.post-comment .input-box .count {
	right: 80rpx;
	bottom: 20rpx;
}

.address-action {
	padding: 30rpx 30rpx 0;
	display: flex;
	height: 100rpx;
	justify-content: space-around;
}

.btn_orange {
	font-size: 30rpx;
	height: 90rpx;
	width: 330rpx;
	line-height: 90rpx;
	padding: 0 20rpx;
	border-radius: 45rpx;
	background: linear-gradient(124deg, #f54c56 17%, #f95d20 83%);
	color: #fff;
}

.btn_orange_border {
	font-size: 30rpx;
	height: 90rpx;
	width: 330rpx;
	line-height: 86rpx;
	padding: 0 20rpx;
	border-radius: 45rpx;
	border: solid 2rpx #f54c56;
	background: #fff;
	color: #f54c56;
}
</style>